<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";
import { getDirectList } from "@/api/nodeapi";
import { UserModule } from "@/store/modules/user";
import { formatAddress } from "@/utils/format";
import clipboardBlock from "./clipboardBlock.vue";
export default defineComponent({
    components: { clipboardBlock },
    setup() {
        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            // setat.pageNum = 0;
            // finished.value = false;
            // loading.value = true;
            // refreshing.value = true;
            onLoad();
        };
        const onLoad = async () => {
            loading.value = true;
            const res = await getDirectList({
                pageNum: setat.pageNum - 1,
                pageSize: setat.pageSize,
                tokenType: 4,
            });
            setat.total = res.data.data.Total;
            list.value = res.data.data.DirectList || [];
            loading.value = false;
            // list.value = list.value.concat([
            //     {
            //         Amount: "1000",
            //         CreatedAt: "20202 29-22 11:22",
            //         Status: 1,
            //     },
            //     {
            //         Amount: "1000",
            //         CreatedAt: "20202 29-22 11:22",
            //         Status: 2,
            //     },
            //     {
            //         Amount: "1000",
            //         CreatedAt: "20202 29-22 11:22",
            //         Status: 3,
            //     },
            // ]);
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            list,
            setat,
            refreshing,
            loading,
            finished,
            onRefresh,
            onLoad,
            formatAddress,
        };
    },
});
</script>

<template>
    <clipboard-block />
    <div class="list">
        <div class="head">
            <span>{{ $t("layout.Address") }}</span>
            <span>{{ $t("layout.MaximumIndividualPledge") }}</span>
            <span>{{ $t("layout.MaximumCommunityPledge") }}</span>
        </div>

        <ul>
            <li v-for="(item, index) in list" :key="index">
                <div>{{ formatAddress(item.Address) }}</div>
                <div>{{ item.MaxStake }}</div>
                <div>{{ item.DownlineStake }}</div>
            </li>
        </ul>
        <list-finished v-if="!loading && list.length == 0" />
        <div class="pagination">
            <van-pagination
                v-model="setat.pageNum"
                :total-items="setat.total"
                :show-page-size="3"
                :items-per-page="setat.pageSize"
                force-ellipses
                @change="onRefresh"
            >
                <template #prev-text>
                    <van-icon name="arrow-left" />
                </template>
                <template #next-text>
                    <van-icon name="arrow" />
                </template>
            </van-pagination>
        </div>
    </div>
</template>

<style lang="less" scoped>
.list {
    margin-top: 20px;
    border-radius: 20px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    background: #fff;

    .head {
        padding: 25px 0;
        display: flex;
        background: #f8f8f8;
        text-align: center;
        span {
            flex: 1;
            color: #000;
            font-size: 16px;
            font-weight: 700;
        }
    }
    &:deep(.van-list__finished-text) {
        font-size: 18px;
    }
    &:deep(.van-loading) {
        .van-loading__text {
            font-size: 18px;
        }
    }
    ul {
        li {
            padding: 22px 0;
            display: flex;
            text-align: center;
            border-bottom: 1px solid #d9d9d9;
            div {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                color: #000;
                font-size: 16px;
                font-weight: 400;
            }
            .status {
                display: inline-block;
                padding: 4px 16px;
                line-height: 18px;
                color: #17c580;
                border-radius: 30px;
                min-width: 96px;
                box-sizing: border-box;
                &.status4 {
                    color: #17c580;
                    background: rgba(54, 183, 145, 0.3);
                }
                &.status0,
                &.status1,
                &.status2 {
                    color: rgba(60, 113, 251, 1);
                    background: rgba(60, 113, 251, 0.3);
                }
                &.status3,
                &.status5 {
                    color: rgba(233, 57, 57, 1);
                    background: rgba(233, 57, 57, 0.3);
                }
            }
        }
    }
    .pagination {
        padding-top: 50px;
        text-align: right;
        padding-right: 10px;
        .van-pagination {
            display: inline-block;
        }
    }
    @media (max-width: 1000px) {
        & {
            .head {
                padding: 20px 0;
                span {
                    font-size: 14px;
                    font-weight: 700;
                }
            }
            ul {
                li {
                    padding: 15px 0;
                    div {
                        font-size: 12px;
                    }
                    .status {
                        min-width: auto;
                    }
                }
            }
            .pagination {
            }
        }
    }
}
</style>
